<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<c:set var="user" value="${sessionScope.user}"/>
<!DOCTYPE html>
<html>

<head>
  <title>积分中心</title>
</head>

<body>
<div class="myaccount">
  <div class="row">
    <div class="ucenter">
      <div class="ucenter-info mt10">
        <div class="info-title">
          <h5>积分中心</h5>
        </div>
        <div class="info">
          <ul class="info-img">
            <li><img src="${path}/avatar/${user.headUrl}" class="avatar" /></li>
          </ul>
          <div class="info-main">
            <div class="row">
              <label>
                用户名：</label>${user.username}
            </div>
            <div class="row">
              <label>
                用户ID：</label>${user.id}
            </div>
            <div class="row">
              <label>
                积分：</label><span id="credit_show"></span>
            </div>
            <div class="row">
              <label>
                积分详情：</label>
              <button class="BUTTON" id="btn_integral" type="button" style="height: 30px;">积分详情</button>
            </div>
            <div id="integral_div2" style="display: none; margin-left: -20%;">
              <div class=" myaccount-table table-responsive text-center">
                <table class="table table-bordered">
                  <thead class="thead-light">
                  <tr style="line-height: 6px;">
                    <%--<th>行为</th>--%>
                    <%--<th>状态</th>--%>
                    <th>类型</th>
                    <th>积分</th>
                    <th>时间</th>
                  </tr>
                  </thead>
                  <%--积分详情--%>
                  <tbody id="integral_tbody"></tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="clear">
      </div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript">

  //时间戳转换为时间
  function timestampToTime(timestamp) {
    var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
    var Y = date.getFullYear() + '-';
    var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
    var D = date.getDate() + ' ';
    var h = date.getHours() + ':';
    var m = date.getMinutes() + ':';
    var s = date.getSeconds();
    return Y+M+D+h+m+s;
  }

  $(document).ready(function() {
    var user="<%=session.getAttribute("user")%>";
    var uid = ${user.id};

    $("#btn_integral").click(function() {
      $("#integral_div2").toggle();
    });

    //查询用户的积分
    $.ajax({
      url: "/credit/showCredit",
      type: "post",
      data: {uid:uid},
      dataType: "json",
      async: false,
      success: function(result) {
        var str2 = "";
        str2 += ''+ result.message +'';
        $('#credit_show').html(str2);
      }
    });

    //显示积分详情
    $.ajax({
      type: 'POST',
      url: '/credit/showCreditDetail',
      dataType: "json",
      data: {uid:uid},
      error: function () {
        console.log("失败");
      },
      success: function (result) {
        var str = '';
        for (var key in result) {
          for (i = 0; i < result[key].length; i++) {
            console.log(result[key][i]);
            str += '<tr>';
//            str += '  <td>'+ result[key][i].item.itemName +'</td>';
            str += '  <td>'+ result[key][i].type +'</td>';
            str += '  <td>'+ result[key][i].credit +'</td>';
            str += '  <td>'+ timestampToTime(result[key][i].createDate) +'</td>';
            str += '</tr>';
          }
        }
        $('#integral_tbody').html(str);
      }
    });
  });
</script>
<style>
  .BUTTON {
    background: #3D608F;
    color: #FFFFFF !important;
    border: 1px solid #3D608F;
    border-radius: 15px;
  }
</style>

</html>